<template>
	<view class="container">
		<image class="bg" src="https://community.chuangxiangdianli.com/images/invite/bg.png" mode=""></image>
		<!-- 返回按钮 -->
		<view class="nav">
			<view @click="goBack"></view>
			邀请码
		</view>
		<view class="yqhy">邀请好友</view>
		<!-- 二维码 -->
		<view class="code">
			<image class="code_bg" src="https://community.chuangxiangdianli.com/images/invite/1.png" mode=""></image>
			<view class="title">邀请好友享优惠</view>
			<view class="qrcode">
				<image :src="imgSrc" mode=""></image>
			</view>
			<view class="btn">
				<view @click="shareImg">点击分享好友</view>
				<view @click="saveImg">保存图片</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				imgSrc: 'http://community.chuangxiangdianli.com/storage/goods/2021-03-04/sgXPDAqRddHs7kpPJtj8945hY0baFWvrozqI0ZMC_150.jpg',
			}
		},
		methods: {
			// 返回上一级
			goBack() {
				uni.navigateBack()
			},
			// 点击下载图片
			saveImg() {
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.imgSrc,
					success: function() {
						uni.showToast({
							title:"保存成功"
						})
					},
					fail: function() {
						uni.showToast({
							title:"保存失败请稍后重试"
						})
					}
				});
			},
			// 点击分享好友
			shareImg() {
				let that = this
				console.log('执行pic查看')
				uni.showToast({
					title: '请长按图片进行分享',
					icon: 'none',
					success() {
						uni.previewImage({
							current: that.imgSrc,
							urls: [that.imgSrc],
							success() {
								
							}
						})
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.bg{
			position: fixed;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			// z-index: -1;
		}
	}
	.code{
		position: fixed;
		left: 0;
		bottom: 21rpx;
		width: 100%;
		height: 798rpx;
		.code_bg{
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			z-index: -1;
		}
		.title{
			width: 100%;
			text-align: center;
			height: 44rpx;
			font-size: 44rpx;
			font-family: SourceHanSansSC;
			font-weight: 500;
			color: #096F4F;
			margin-top: 10rpx;
			margin-bottom: 98rpx;
		}
		.qrcode{
			height: 376rpx;
			width: 376rpx;
			margin: 0 auto;
			background-color: red;
			&>image{
				display: block;
				height: 100%;
				width: 100%;
			}
		}
		.btn{
			display: flex;
			flex-direction: row;
			justify-content: center;
			height: 90rpx;
			width: 100%;
			margin-top: 68rpx;
			&>view{
				height: 100%;
				width: 268rpx;
				background: linear-gradient(0deg, #FEBB39 0%, #FFEF83 100%);
				border-radius: 45rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #914B23;
				margin: 0 24rpx;
				line-height: 90rpx;
			}
		}
	}
	.nav{
		position: relative;
		height: 40rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: calc(var(--status-bar-height) + 30rpx);
		z-index: 90;
		&>view{
			position: absolute;
			left: 34rpx;
			top: 0;
			bottom: 0;
			margin: auto;
			height:26rpx;
			width: 26rpx;
			border-left: 4rpx solid #FFFFFF;
			border-bottom: 4rpx solid #FFFFFF;
			transform: rotate(45deg);
		}
		
	}
	.yqhy{
		margin-top: 80rpx;
		height:94rpx;
		width: 100%;
		text-align: center;
		font-size: 60rpx;
		color: #FFFFFF;
		z-index: 10;
	}
</style>
